<template>
  <div class="list padding-b150">
    <div class="search padding-lr20 bg-ff flex align-center">
      <van-icon name="arrow-left" @click="listgo" />
      <search class="flex-grow" :disabled="true" @confirms="search"></search>
    </div>

    <!-- 选项卡 -->
    <div class="padding-lr20 bg-ff" v-if="tabList.length>0">
      <tab
        :tabList="tabList"
        :padding="'1'"
        :tabIndex="tabIndex"
        :items="'type_name'"
        @tabChange="getList"
        :one_id="one_id"
      ></tab>
    </div>

    <!-- 标签 -->
    <div class="label rem-26px padding-lr20 bg-ff flex">
      <div class="label_li" @click="showPopup">
        {{label1}}
        <i class="iconfont icon-down"></i>
      </div>
      <div class="label_li" @click="showsPopup" v-if="pickerFirst">
        {{pickerFirst}} > {{pickerLast}}
        <i class="iconfont icon-down"></i>
      </div>
      <div class="label_li" @click="area_onShow">
        {{areaLabel}}
        <i class="iconfont icon-down"></i>
      </div>
    </div>
    <!-- 排序浮层 picker -->
    <van-popup v-model="show" position="bottom" :lazy-render="false">
      <van-picker
        show-toolbar
        :columns="columns"
        :default-index="labelindex1"
        @confirm="onConfirm"
        @cancel="onCancel"
      />
    </van-popup>
    <!-- 商品类别二级浮层 picker -->
    <van-popup v-model="shows" position="bottom" :lazy-render="false">
      <van-picker
        ref="picker2"
        show-toolbar
        :columns="columnss"
        @confirm="onConfirms"
        @cancel="onCancels"
      />
    </van-popup>
    <!-- 地区一级浮层 picker -->
    <van-popup v-model="area_show" position="bottom" :lazy-render="false">
      <van-picker
        value-key="name"
        show-toolbar
        :columns="area"
        @confirm="area_onConfirm"
        @cancel="area_onCancel"
      />
    </van-popup>

    <!-- 顶部指定列表 -->
    <div style="margin-top: 3px;" class="list padding-lr20 bg-ff">
      <div
        class="list_li border-bottom flex justify-between"
        v-for="(item,index) in topList"
        :key="index"
        @click="to('/card/', item.id)"
      >
        <img class="margin-r24" v-if="item.logo" :src="item.logo" alt />
        <img class="margin-r24" v-if="!item.logo" src="@/assets/img/nodata.png" alt />
        <div class="flex-grow flex flex-column justify-around">
          <div class="rem-32px text-cut-one">
            <i class="iconfont icon-huoyan"></i>
            {{item.enterprise_title}}
          </div>
          <div class="rem-26px text-66 flex justify-between">
            <span class="span-50p">关注度: {{item.attention_num}}</span>
            <span class="span-50p">申请量: {{item.applay_num}}</span>
          </div>
          <div class="rem-26px text-66 flex justify-between">
            <span class="span-50p">{{item.vip}}</span>
            <span class="span-50p">品类: {{item.type_name}}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 列表 -->
    <div style="margin-top: 3px;" class="list padding-lr20 bg-ff">
      <div
        class="list_li border-bottom flex justify-between"
        v-for="(item,index) in list"
        :key="index"
        @click="to('/card/', item.id)"
      >
        <img class="margin-r24" v-if="item.logo" :src="item.logo" alt />
        <img class="margin-r24" v-if="!item.logo" src="@/assets/img/nodata.png" alt />
        <div class="flex-grow flex flex-column justify-around">
          <div class="rem-32px text-cut-one">{{item.enterprise_title}}</div>
          <div class="rem-26px text-66 flex justify-between">
            <span class="span-50p">关注度: {{item.attention_num}}</span>
            <span class="span-50p">申请量: {{item.applay_num}}</span>
          </div>
          <div class="rem-26px text-66 flex justify-between">
            <span class="span-50p">{{item.vip}}</span>
            <span class="span-50p">品类: {{item.type_name}}</span>
          </div>
        </div>
      </div>
    </div>
    <load @loadData="getData" :list="list" :total="total" :nodata="list.length<10?true:false"></load>

    <!-- 底部导航 -->
    <footerNav></footerNav>
  </div>
</template>

<script>
import footerNav from "../../components/footer";
import tab from "../../components/tab";
import load from "../../components/load";
import search from "../../components/search";
export default {
  components: {
    tab,
    load,
    search,
    footerNav
  },
  data() {
    return {
      tabList: [],
      tabIndex: 0,
      list: [],
      topList: [],
      total: 0,

      // 排序picker
      label1: "",
      labelindex1: 0,
      columns: ["默认", "按点击量", "按申请量"],
      show: false,
      // 二级picker +s
      pickerFirst: "",
      pickerFirstIndex: 0,
      pickerLast: "",
      pickerLastIndex: 0,
      columnss: [],
      shows: false,
      account_type_value: "",
      // 地区一级
      areaLabel: "",
      areaIndex: 0,
      areaId: 0,
      area: [],
      area_show: false,

      one_id: 0,
      two_id: 0, // 数组0 变为了固定 ‘全部’ 所以传入的下标要+1
      three_id: 0
    };
  },
  watch: {
    "window.location.hash"(n) {
      this.locationUrl();
    }
  },
  mounted() {
    this.locationUrl()
    this.getTabList();
    this.label1 = this.columns[this.labelindex1];
    this.getArea();
  },
  methods: {
    locationUrl() {
      if(!window.location.hash){
        return false
      }
      this.one_id = window.location.hash
        .split("#")[1]
        .split("&")[0]
        .split("=")[1];
      this.two_id = window.location.hash
        .split("#")[1]
        .split("&")[1]
        .split("=")[1];
      this.three_id = window.location.hash
        .split("#")[1]
        .split("&")[2]
        .split("=")[1];
    },
    // tab切换
    getList(e, id) {
      this.tabIndex = e;
      this.one_id = id.toString();
      this.two_id = 0
      this.three_id = 0
      window.location.hash = `one_id=${this.one_id}&two_id=0&three_id=0`;
      this.pickerFirstIndex = 0;
      this.pickerLastIndex = 0;
      this.getTwo(id);
    },
    // 搜索
    search() {
      this.$router.push({
        path: '/search/search'
      })
    },
    // 排序picker
    onConfirm(value, index) {
      this.label1 = value;
      this.labelindex1 = index;
      this.show = false;
      this.getData(1);
    },
    onCancel() {
      this.show = false;
    },
    showPopup() {
      this.show = true;
    },
    // 商品类别picker +s
    onConfirms(value, index) {
      console.log(value, index);
      this.pickerFirst = value[0];
      this.pickerLast = value[1];
      this.pickerFirstIndex = index[0];
      this.pickerLastIndex = index[1];
      this.shows = false;
      // 涉及href地址的  均为防止刷新重置搜索选项
      window.location.hash = `one_id=${this.one_id}&two_id=${index[0]}&three_id=${index[1]}`;
      // 三种id  是为了请求
      this.two_id = index[0];
      this.three_id = index[1];
      this.getData(1);
    },
    onCancels() {
      this.shows = false;
    },
    showsPopup() {
      this.shows = true;
      this.$refs.picker2.setIndexes([this.two_id, this.three_id]);
    },
    // 获取二三级分类
    getTwo(id) {
      this.$axios.post( "/wap/enterpriseType/cate", {
        one_cate_id: id
      }).then(res => {
        // 重置数组
        this.columnss = [];
        this.pickerFirst = "";
        this.pickerLast = "";
        this.pickerFirstIndex = 0;
        this.pickerLastIndex = 0;
        // 如果有数据
        if (res.data.data.length > 0) {
          this.columnss.push({
            text: "全部",
            id: 0,
            children: [
              {
                text: "全部",
                id: 0
              }
            ]
          });
          for (let i = 0; i < res.data.data.length; i++) {
            this.columnss.push({
              text: res.data.data[i].type_name,
              id: res.data.data[i].id,
              children: [
                {
                  text: "全部",
                  id: 0
                }
              ]
            });
            for (let j in res.data.data[i].threeCate) {
              this.columnss[i + 1].children.push({
                text: res.data.data[i].threeCate[j].type_name,
                id: res.data.data[i].threeCate[j].id
              });
            }
            if (i == res.data.data.length - 1) {
              if (this.two_id && this.three_id) {
                this.pickerFirst = this.columnss[this.two_id].text;
                this.pickerLast = this.columnss[this.two_id].children[
                  this.three_id
                ].text;
                this.pickerFirstIndex = this.two_id;
                this.pickerLastIndex = this.three_id;
              } else {
                this.pickerFirst = this.columnss[0].text;
                this.pickerLast = this.columnss[0].children[0].text;
              }
            }
            if (i == res.data.data.length - 1) {
              this.getData(1);
            }
          }
        } else {
          this.columnss.push({
            text: "全部",
            id: 0,
            children: [
              {
                text: "全部",
                id: 0
              }
            ]
          });
          this.getData(1);
        }
      });
    },
    // 获取分类
    getTabList(id) {
      this.$axios.post( "/wap/enterpriseType/cate", {
        one_cate_id: ""
      }).then(res => {
        this.tabList = res.data.data;
        this.one_id = this.one_id ? this.one_id : res.data.data[0].id;
        this.getTwo(this.one_id);
      });
    },
    // 懒加载 传页数
    getData(page) {
      if (this.columnss == undefined || this.columnss.length == 0) {
        this.list = [];
        this.topList = [];
        return false;
      }
      this.$axios.post( "/wap/enterprise/list", {
        three_cate_id:
          this.one_id +
          "," +
          this.columnss[this.pickerFirstIndex].id +
          "," +
          this.columnss[this.pickerFirstIndex].children[this.pickerLastIndex]
            .id, // if三级==false  传二级 if二级==false  传一级
        page: page,
        sort: this.labelindex1,
        city: this.areaId ? this.areaId : 0
      }).then(res => {
        if (page == 1) {
          this.list = [];
          this.topList = [];
          // 顶部广告固定不变 只在第一页时加入
          for (let j in res.data.data.top) {
            this.topList.push(res.data.data.top[j]);
          }
        }
        if (res.data.data.normal.length == 0) {
          this.total++;
          return false;
        }
        for (let i in res.data.data.normal) {
          this.list.push(res.data.data.normal[i]);
        }
      });
    },
    // 地区相关事件
    area_onConfirm(value, index) {
      this.areaIndex = index;
      this.areaLabel = value.name;
      this.areaId = value.id;
      this.area_show = false;
      this.getData(1);
    },
    area_onCancel() {
      this.area_show = false;
    },
    area_onShow() {
      this.area_show = true;
    },
    getArea() {
      this.$axios.post( "/common/getRegion", {
        id: 0
      }).then(res => {
        res.data.data.unshift({
          id: 0,
          name: "全部省份"
        });
        this.area = res.data.data;
        this.areaLabel = this.area[this.areaIndex].name;
      });
    },
    // 携带参数跳转
    to(path, id) {
      if (id) {
        this.$router.push({
          path: path,
          query: {
            id: id
          }
        })
        return false;
      }
      this.$router.push({
        path: path
      })
    },
    listgo() {
      let url = window.localStorage.getItem("backurl");
      this.$router.push({
        name: url ? url : "index"
      });
      window.localStorage.removeItem("backurl");
    }
  }
};
</script>

<style scoped>
/* 头部搜索 */
.search {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2003;
}
.list .van-icon {
  color: #666;
  font-size: 0.4rem;
}
/* 标签 */
.label {
  padding: 0.2rem 0.2rem 0;
  flex-wrap: wrap;
}

.label .label_li:first-of-type {
  background: #f7f7f7;
  border: 0.01rem solid #ebebeb;
  color: #333;
}
.label_li {
  height: 0.48rem;
  line-height: 0.48rem;
  padding: 0 0.2rem;
  color: #ff0000;
  background: #fcedea;
  border: 0.01rem solid #ff0000;
  margin-right: 0.18rem;
  border-radius: 0.1rem;
  margin-bottom: 0.2rem;
}
.label_li .iconfont {
  font-size: 0.16rem;
  color: #ff0000;
}
/* 列表 */
.list_li {
  padding: 0.26rem 0;
}
.list_li .icon-huoyan {
  color: rgb(223, 18, 38);
  margin-right: 0.14rem;
}
.list_li > img {
  width: 2.28rem;
  height: 1.74rem;
  object-fit: contain;
}
.list_li:last-of-type {
  border: none;
}
</style>